<template>
  <view class="li-loremore" @click="onStatusClick">
    <!-- 左边的线 -->
    <view class="line"></view>
    <!-- 内容 -->
    <view v-show="status == 'loadmore'" class="content">{{
      loadmoreText
    }}</view>
    <view v-show="status == 'loading'" class="content" style="display: flex">
      <u-loading-icon v-show="showLoadingIcon" />
      {{ loadingText }}</view
    >
    <view v-show="status == 'nomore' && showNoMore" class="content">{{
      nomoreText
    }}</view>
    <!-- 右边的线 -->
    <view class="line"></view>
  </view>
</template>

<script>
export default {
  name: "li-loadmore",
  props: {
    status: {
      type: String,
      default: "loading",
    },
    loadingText: {
      type: String,
      default: "加载中~~",
    },
    loadmoreText: {
      type: String,
      default: "上拉或点击加载更多~~",
    },
    nomoreText: {
      type: String,
      default: "已加载全部",
    },
    showNoMore: {
      type: Boolean,
      default: true,
    },
    showLoadingIcon: {
      type: Boolean,
      default: true,
    },
  },
  methods: {
    onStatusClick() {
      this.$emit("loadmore");
    },
  },
};
</script>

<style lang="scss" scoped>
.li-loremore {
  width: 100%;
  padding: 5px 30px;

  display: flex;
  align-items: center;
  .line {
    flex: 1;
    border: 1px solid #e6e8eb;
  }

  .content {
    margin: 0 10px;
    color: #606266;
    font-size: 14px;
  }
}
</style>
